<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css动画旋转照片墙</title>
	<style>
		.wrapper{
			position:absolute;
			top:50%;
			left:50%;
			/*以下两个值会被animation动画覆盖，所以放到动画里一起写*/
			/*transform:translate(-50%,-50%);
			transform: rotateX(-20deg);*/
			width:200px;
			height:200px;
			transform-style:preserve-3d;/*使他变成3d元素*/
			animation: turn 3s linear infinite;
		}
		.wrapper div{
			/*设置定位使六张图片重叠到一起*/
			position:absolute;
			top:0;
			left:0;
			width:200px;
			height:200px;
			line-height:200px;
			opacity:.5;
			text-align:center;
			color:#fff;
			font-size:30px;
		}
		.wrapper .item1{
			background:red;
			transform:rotateY(0deg) translateZ(200px);
		}
		.wrapper .item2{
			background:green;
			transform:rotateY(60deg) translateZ(200px);
		}
		.wrapper .item3{
			background:lightblue;
			transform:rotateY(120deg) translateZ(200px);
		}
		.wrapper .item4{
			background:deeppink;
			transform:rotateY(180deg) translateZ(200px);
		}
		.wrapper .item5{
			background:orange;
			transform:rotateY(240deg) translateZ(200px);
		}
		.wrapper .item6{
			background:purple;
			transform:rotateY(300deg) translateZ(200px);
		}
		@keyframes turn{
			0%{
				transform:translate(-50%,-50%) rotateX(-20deg) rotateY(0deg);
			}
			100%{
				transform:translate(-50%,-50%) rotateX(-20deg) rotateY(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="item1">1</div>
		<div class="item2">2</div>
		<div class="item3">3</div>
		<div class="item4">4</div>
		<div class="item5">5</div>
		<div class="item6">6</div>
	</div>
</body>
</html>